import QtQuick
import QtQuick.Layouts
import QtCharts

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true

    ChartView {
        id: chartView
        title: "季度销售额箱线图"
        titleFont.bold: true
        titleFont.pointSize: 16

        anchors.fill: parent
        antialiasing: true
        legend.visible: true
        legend.alignment: Qt.AlignBottom
        backgroundRoundness: 5

        // Y轴：显示销售额数值
        ValueAxis {
            id: valueAxisY
            titleText: "销售额 (万元)"
            min: 0
            max: 100
            tickCount: 6
            labelFormat: "%.0f"
        }

        // BarCategoryAxis类用于在图表的坐标轴上添加这些类别，类别标签必须唯一。
        // BoxPlotSeries中的项目(BoxSet) 会根据它们的索引值被归类到不同的类别中。
        // 如果多个BoxPlotSeries使用了相同的类别标签，只有第一个会被绘制。

        // X轴：产品类别
        BarCategoryAxis {
            id: valueAxisX
            categories: ["手机类", "平板类", "笔记本类", "手表类", "耳机类"]
            titleText: "产品类别"
            labelsFont.pointSize: 12
        }

        BoxPlotSeries {
            id: plotSeries
            name: "销售额分布"
            axisX: valueAxisX
            axisY: valueAxisY

            boxOutlineVisible: true
            boxWidth: 0.6

            // The values of the box-and-whiskers item. The following enumerations can be used as indexes when accessing the list of values
            // Constant                 Description
            // BoxSet.LowerExtreme      The smallest value of the box-and-whiskers item.
            // BoxSet.LowerQuartile     The median value of the lower half of the box-and-whiskers item.
            // BoxSet.Median            The median value of the box-and-whiskers item.
            // BoxSet.UpperQuartile     The median value of the upper half of the box-and-whiskers item.
            // BoxSet.UpperExtreme      The largest value of the box-and-whiskers item.

            // 注意：values 数组需要的是已计算好的五数概括，而非原始数据
            // 格式: [最小值, 下四分位数(Q1), 中位数, 上四分位数(Q3), 最大值]
            BoxSet { values: [15, 22, 35, 48, 65]; label: "手机类" }
            BoxSet { values: [8, 18, 25, 32, 45]; label: "平板类" }
            BoxSet { values: [30, 42, 55, 68, 85]; label: "笔记本类" }
            BoxSet { values: [12, 20, 28, 36, 50]; label: "手表类" }
            BoxSet { values: [5, 12, 18, 25, 38]; label: "耳机类" }

            // 点击交互：显示详细信息
            onClicked: function(boxSet, index) {
                console.log("点击了: ", boxSet.label)
                console.log("├ 最小值: ", boxSet.values[BoxSet.LowerExtreme], "万")
                console.log("├ 下四分位数(Q1): ", boxSet.values[BoxSet.LowerQuartile], "万")
                console.log("├ 中位数: ", boxSet.values[BoxSet.Median], "万")
                console.log("├ 上四分位数(Q3): ", boxSet.values[BoxSet.UpperQuartile], "万")
                console.log("└ 最大值: ", boxSet.values[BoxSet.UpperExtreme], "万")
            }
        }
    }
}
